<!DOCTYPE html>
<html ng-app="report">
<head>
  <title>活动报表</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/bower_components/angular-chart.js/dist/angular-chart.min.css">
</head>
<body ng-controller="ReportCtrl">
	<div style="border:solid 1px #f2f2f2;text-align:center;">
		<span>查询条件: </span><input ng-model="skip" type="text"/><button ng-click="change()">查询（单位为 小时）</button>
	</div>
	<div>
		<div style="width:50%;float:left;">
			<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-legend="true" chart-colours="colours" chart-click="onClick" >
			</canvas> 
		</div>
		<div style="width:50%;float:left">
			
			<canvas id="bar" class="chart chart-bar"
			  chart-data="data" chart-labels="labels" chart-series="series" chart-series="series" chart-colours="colours">
			</canvas>
		</div>
		<div style="clear:both;">
	</div>


</body>
<script src="/static/bower_components/angular/angular.min.js"></script>
<script src="/static/bower_components/Chart.js/Chart.min.js"></script>
<script src="/static/bower_components/angular-chart.js/dist/angular-chart.js"></script>
<script src="/static/bower_components/lodash/dist/lodash.min.js"></script>
<script src="/static/bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript">
	var report = angular.module('report',['chart.js'])
			.service('ReportService',['$http','$q',function($http,$q,CONFIG){
				var queryAll = function(data){
					var deferred = $q.defer();
					$http({method:'GET',url:'http://wechat.topxgun.com/report/queryAll',params:data})
					.success(function(data,status,headers,config){
						deferred.resolve(data);
					})
					.error(function(data,status,headers,config){
						deferred.reject(data);
					});
					return deferred.promise;
				}

				return {
					queryAll:queryAll
				}

			}])
			.controller('ReportCtrl',function($scope,ReportService){
				$scope.getDate = function(time){
				    return moment.unix(time/1000).format("MM/DD HH:mm:ss");
				}

				$scope.skip=1;
				// $scope.labels = [];
				// $scope.data = [
				//    [],
				//    [],
				//    []
				// ];

				$scope.change = function(){
					console.log($scope.skip);
					$scope.loopquery();
				}

				$scope.colours = ['Red','Green','Yellow']

				$scope.series = ['用户人数','砍价活动发起数量','砍价行为数量'];

				$scope.loopquery = function(){
					$scope.labels = [];
					$scope.data = [
					   [],
					   [],
					   []
					];
					var promise = new ReportService.queryAll({event_id:'56ac5e8cc604bda532915a2a',skip:$scope.skip});
					promise.then(function(reports){
						var _reports = _.sortBy(reports,function(o){
							return o.create_date;
						})
						_reports.forEach(function(report,index){
							$scope.data[0].push(report.user_count);
							$scope.data[1].push(report.activity_count);
							$scope.data[2].push(report.activityuser_count);
							$scope.labels.push($scope.getDate(report.create_date));
						})
					
					},function(data){
						console.log(data)
					})	
				}

				$scope.loopquery();

				setInterval($scope.loopquery,30000);

		

			})
			
</script>
</html>